<template>
  <div class="login_content">
    <div class="login_box">
      <div class="login_left">
        <div class="left_content">
          <div class="login_logo">
            <h1>
              请先登录
            </h1>
          </div>
          <div class="login_form">
            <el-form ref="login_form" :rules="rules" :model="userInfo">
              <el-form-item prop="userName">
                <el-input
                  v-model="userInfo.userName"
                  placeholder="请输入账号/手机号"
                >
                  <i slot="prefix" class="el-input__icon el-icon-user-solid"
                /></el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input
                  v-model="userInfo.pwd"
                  placeholder="请输入密码"
                  show-password
                >
                  <i slot="prefix" class="el-input__icon el-icon-s-goods" />
                </el-input>
              </el-form-item>
              <el-form-item prop="visCode">
                <div class="login_code">
                  <div>
                    <el-input
                      v-model="userInfo.visCode"
                      placeholder="请输入验证码"
                    />
                  </div>
                  <canvas
                    ref="canvas"
                    class="text_code"
                    @click="get_vis_code"
                  />
                </div>
              </el-form-item>
              <el-form-item>
                <div class="login_btn" @click="login('login_form')">登录</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="login_right">
        <el-carousel height="540px" direction="vertical">
          <el-carousel-item v-for="item in urls" :key="item">
            <!-- <h3 class="medium">{{ item }}</h3> -->
            <el-image :src="item" fit="cover" style="height:100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import { draw } from "@/utils/Verification";
// import { setIsRemember, getIsRemember } from '@/utils/auth'
export default {
  data() {
    return {
      urls: [
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
        "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
      ],
      userInfo: {
        userName: "admin",
        pwd: "admin",
        visCode: "",
        isRemember: false,
      },
      VisCode: "", // 验证码
      rules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        visCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    const localData = localStorage.data;
    if (localData) {
      var obj = JSON.parse(localData);
      this.userInfo.name = obj.username;
      this.userInfo.isRemember = obj.isRemember;
    }
    this.get_vis_code();
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.VisCode != this.userInfo.visCode) {
            this.get_vis_code();
            return this.$message.error("验证码输入不一致");
          }
          const { userName, pwd } = this.userInfo;
          const rs = await this.$http.post("login", { userName, pwd });
          if (rs.status !== 200) return;
          else {
            sessionStorage.token = rs.data.token;
            console.log("userName:", rs.data.userName);
            this.$router.push("/home");
            this.$message.success("登陆成功");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取限制验证码
    get_vis_code() {
      this.VisCode = this.rand(1000, 9999).toString();
      draw(this.VisCode.split(""), this.$refs.canvas);
    },
    rand(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
  },
};
</script>

<style scoped lang="scss">
.login_content {
  width: 100%;
  height: 100%;
  // background: #304156;
  background: url("../../assets/bg_images/bg17.png") no-repeat center center,
    linear-gradient(
      180deg,
      rgba(190, 226, 201, 1) 0%,
      rgba(152, 212, 207, 1) 100%
    );
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.login_box {
  width: 750px;
  min-width: 500px;
  height: 400px;
  margin-top: 8%;
  border-radius: 8px;
  box-shadow: 5px 6px 14px 0px #61bbbb;
  overflow: hidden;

  display: flex;
  justify-content: space-between;

  .login_left {
    width: 400px;
    height: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    background: #fff;

    .left_content {
      width: 400px;
      padding: 28px 40px;
      // margin-top: 40px;
      box-sizing: border-box;
    }

    .login_form {
      width: 100%;
      height: 200px;
      margin-top: 20px;

      .login_code {
        width: 100%;
        display: flex;
        justify-content: space-between;
        text-align: center;

        .text_code {
          width: 120px;
          height: 40px;
          cursor: pointer;
          background: #eee;
        }
      }

      .login_btn {
        width: 100%;
        line-height: 40px;
        text-align: center;
        background: linear-gradient(to right, #27bdaf, #3dd3c5);
        color: #fff;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }

      .check_pass {
        float: right;
      }
    }
  }

  .login_right {
    width: 100%;
    height: 100%;
    // background-image: url("https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg");
    // background-position: center;
    // background-repeat: no-repeat;
  }
}
</style>
